<script setup lang="ts">
import dayjs from 'dayjs'
import type { FormInstance } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'

import {
  RenderWarningTag,
  renderOrderState,
  renderType,
} from '@/mixins/Warning'
import { alarmApi } from '@/api'
import { WARNING_WORK_ORDER_STATES } from '@/enum'

import type { MyWorkOrder } from '@/types'

const props = defineProps<{
  info: Partial<MyWorkOrder>
}>()
const emits = defineEmits<{
  (e: 'save-success'): void
}>()
const dialogRef = ref<InstanceType<typeof CustomDialog>>()
const formRef = ref<FormInstance>()

const model: {
  content: string
  time: string
} = reactive({
  content: '',
  time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
})
const rules = {
  content: [
    {
      required: true,
      message: '请输入处理内容描述，字数在200个以内',
    },
  ],
  time: [
    { required: true, message: '请选择期望处理结束时间' },
  ],
}

function open() {
  model.content = ''
  model.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

async function clickSave(done: any) {
  const isValid = await formRef.value
    ?.validate()
    .catch(() => {
      done()
    })
  if (isValid) {
    try {
      await alarmApi.updateWorkOrder({
        id: props.info.workOrderId!,
        workOrderNum: props.info.workOrderNum!,
        state: WARNING_WORK_ORDER_STATES.PENDING,
        processingContent: model.content,
        processingTime: model.time,
      })
      done()
      close()
      ElMessage.success('保存成功')
      emits('save-success')
    }
    catch (e) {
      console.log(e)
      done()
    }
  }
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="提交告警工单"
    need-saving
    class="custom-dialog"
    @confirm="clickSave"
  >
    <ElDescriptions title="告警信息" border :column="2">
      <ElDescriptionsItem label="工单号" :span="2">
        {{ info.workOrderNum }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警类型">
        <RenderWarningTag
          :warning-info="info"
          :render="renderType"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警持续时间">
        {{ info.warningLastTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标名称">
        {{ info.indicatorName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="测点点位号">
        {{ info.indicatorCode }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标编码" :span="2">
        {{ info.indicatorNumber }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="设备名称/点位" :span="2">
        {{ info.pointNameFull }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警开始时间">
        {{ info.warningStartTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="期望处理结束时间">
        {{ info.processingEndTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警内容" :span="2">
        {{ info.warningContent }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="阈值下限-上限">
        {{ info.thresholdValue }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警发生值">
        {{ info.warningValue }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="工单状态" :span="2">
        <RenderWarningTag
          :warning-info="info"
          :render="renderOrderState"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem
        v-if="
          WARNING_WORK_ORDER_STATES.REJECTED
            === info.orderState
        "
        label="驳回原因"
        :span="2"
      >
        {{ info.auditContent }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <div
      class="el-descriptions__header"
      style="margin-bottom: 16px; margin-top: 16px"
    >
      <div class="el-descriptions__title">
        处理信息
      </div>
    </div>
    <ElForm
      ref="formRef"
      :model="model"
      :rules="rules"
      label-position="top"
      style="position: relative"
    >
      <ElFormItem
        label="处理时间"
        prop="time"
        style="width: 50%"
      >
        <ElDatePicker
          v-model="model.time"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm"
          style="--el-date-editor-width: 100%"
        />
      </ElFormItem>
      <ElFormItem label="处理内容描述" prop="content">
        <ElInput
          v-model.trim="model.content"
          type="textarea"
          :maxlength="200"
          :minlength="1"
          :autosize="{
            minRows: 5,
            maxRows: 8,
          }"
        />
      </ElFormItem>
    </ElForm>
  </CustomDialog>
</template>
